<template>
  <div class="evaluation-score" :class=" size ? size : '' ">
    <span
      class="heart"
      v-for="item in max"
      :key="item"
      @click="handleHeart(item)"
    >{{item <= value ? '💗' : '🤍'}}</span>
  </div>
</template>

<script>
export default {
  props: {
    max: {
      type: Number,
      default: 5
    },
    value: {
      type: Number,
      default: 1
    },
    size: {
      type: String,
      default: "medium"
    }
  },
  methods: {
    handleHeart(item) {
      console.log(item);
      this.$emit("input", item);
    }
  }
};
</script>

<style scoped>
.heart {
  cursor: pointer;
  font-size: 20px;
}
.small .heart {
  font-size: 18px;
}

.large .heart {
  font-size: 24px;
}
</style>